import type { WatermarkProps } from '@/types/watermark'
import React, { useEffect, useRef } from 'react'
import styles from './watermark.less'

/**
 * 标准底栏水印组件
 * @description 底部横条显示品牌、型号、参数等，支持自适应
 */
const BottomBarWatermark: React.FC<
  WatermarkProps & { fontSizeRatio?: number; logoSizeRatio?: number }
> = ({
  image,
  watermarkConfig,
  brandLogo,
  deviceModel,
  textColor,
  containerRef,
  fontSizeRatio = 1,
  logoSizeRatio = 1
}) => {
  const imgRef = useRef<HTMLImageElement>(null)
  const watermarkRef = useRef<HTMLDivElement>(null)

  // 直接用watermarkConfig.fontSize * fontSizeRatio 作为字体大小
  useEffect(() => {
    if (watermarkRef.current) {
      watermarkRef.current.style.fontSize = `${watermarkConfig.fontSize * fontSizeRatio}px`
    }
  }, [watermarkConfig.fontSize, fontSizeRatio])

  return (
    <div
      ref={containerRef}
      className={styles.imageContainer}
      style={{ position: 'relative', width: '100%', margin: '0 auto' }}
    >
      {/* 原始图片 */}
      <img
        ref={imgRef}
        src={image || ''}
        alt="Preview"
        style={{ display: 'block', width: '100%', height: 'auto', objectFit: 'contain' }}
      />
      {/* 标准水印水印样式 */}
      <div
        ref={watermarkRef}
        className={styles.bottomBarWatermark}
        style={{ backgroundColor: watermarkConfig.backgroundColor, color: textColor }}
      >
        {/* 品牌Logo和机型名称 */}
        <div className={styles.brandContainer}>
          {brandLogo ? (
            <img
              src={brandLogo}
              alt="Brand"
              style={{ height: `${2 * logoSizeRatio}em`, objectFit: 'contain' }}
            />
          ) : null}
          <span style={{ fontSize: '0.6em', color: textColor }}>
            {watermarkConfig.showModel && deviceModel}
          </span>
        </div>
        {/* 右侧EXIF信息 */}
        <div className={styles.exifInfo}>
          <div style={{ textAlign: 'right', fontSize: '0.6em', color: textColor }}>
            {watermarkConfig.showFocalLength &&
              watermarkConfig.exifData.focalLength?.replaceAll(' ', '')}
            &nbsp;&nbsp;
            {watermarkConfig.showAperture && watermarkConfig.exifData.aperture}&nbsp;
            {watermarkConfig.showShutter && watermarkConfig.exifData.shutterSpeed}&nbsp;
            {watermarkConfig.showISO && watermarkConfig.exifData.iso}
          </div>
          {/* 新增：镜头信息/拍摄日期/自定义文字，可配置显示 */}
          {(watermarkConfig.showCustomText && watermarkConfig.customText) ||
          (watermarkConfig.showLensInfo && watermarkConfig.lensInfo) ||
          (watermarkConfig.showDateTime && watermarkConfig.dateTime) ? (
            <div
              style={{
                textAlign: 'right',
                fontSize: '0.6em',
                color: textColor,
                marginTop: '0.2em'
              }}
            >
              {watermarkConfig.showCustomText && watermarkConfig.customText}
              {(!watermarkConfig.showCustomText || !watermarkConfig.customText) && (
                <>
                  {watermarkConfig.showLensInfo && watermarkConfig.lensInfo}
                  {watermarkConfig.showLensInfo &&
                  watermarkConfig.lensInfo &&
                  watermarkConfig.showDateTime &&
                  watermarkConfig.dateTime ? (
                    <>&nbsp;&nbsp;&nbsp;&nbsp;</>
                  ) : null}
                  {watermarkConfig.showDateTime && watermarkConfig.dateTime}
                </>
              )}
            </div>
          ) : null}
        </div>
      </div>
    </div>
  )
}

export default BottomBarWatermark
